import React, { Fragment, PureComponent } from 'react';
import { Redirect } from 'react-router-dom';
import { LoginWrapper, LoginBox, Input, Button } from './style';
import { connect } from 'react-redux';
import {actionCreators} from './store'


class Login extends PureComponent {
    render() {
        const { loginStatus } = this.props;
        // 如果没登录就调回登录页面
        if (!loginStatus) {
            return (
                <Fragment>
                    <LoginWrapper>
                        <LoginBox>
                            <Input placeholder='账号' type="text" ref={ (input)=>{this.account = input}}/>
                            <Input placeholder='密码' type="password" ref={ (input)=>{this.password = input}}/>
                            <Button onClick={()=>this.props.login(this.account,this.password)}>登录</Button>
                        </LoginBox>
                    </LoginWrapper>
                </Fragment>
            )
        }
        // 如果登录了就调回首页
        else {
            // 使用 react-router-dom 中的 Redirect，将页面重定向到首页
            return <Redirect to='/' />
        }
    }
};

const mapState = (state) => ({
    loginStatus: state.getIn(['login','login'])
})

const mapDispatch = (dispatch) => ({
    login(accountElem,passwordElem) {
        // console.log(accountElem.value, passwordElem.value);
        dispatch(actionCreators.login(accountElem.value, passwordElem.value))
    }
})

export default connect(mapState,mapDispatch)(Login);